<template>
	<div class="res_choose">
		<el-button type="primary" plain icon="el-icon-copy-document" @click="HandlerChoose">选择</el-button>
		<el-dialog title="选择资源" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false" append-to-body>
			<el-table ref="multipleTable" :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border>
				<el-table-column prop="resourceName" label="文件名" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="resourceUrl" label="文件地址" :show-overflow-tooltip="true" :formatter="urlFmt">
					<template slot-scope="scope">
						<el-image
							v-if="type == 'image'"
							style="width: 100px; height: 100px"
							:src="urlFmt(scope.row)"
							fit="contain"
						></el-image>
						<fortress-upload
							style="width: 100px; height: 100px"
							v-if="type == 'video' && urlFmt(scope.row)"
							type="videoShow"
							name="resourceUrl"
							v-model="tableData[scope.$index]"
							:videoSrc="urlFmt(scope.row)"
						></fortress-upload>
						<span v-if="type == 'file'">{{ urlFmt(scope.row) }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" min-width="180">
					<template slot-scope="scope">
						<el-button size="mini" plain @click="choosed(scope.row)">选择</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination :total="page.total" :current-page="page.current" :page-size="page.size" @refreshData="queryList"></pagination>
		</el-dialog>
	</div>
</template>
<script>
import FortressPagination from "@/components/fortress-pagination.vue"
import { sysossrecordPage } from "@/api/system/sysossrecord.js"
export default {
	props: {
		//model名称，只支持两级
		modelName: {
			type: String,
			required: true, //require的意为必填选项
		},
		type: String || "file",
		multiple: Boolean || false,
	},
	data() {
		return {
			dialogVisible: false,
			tableData: [],
			queryForm: {
				resourceType: "",
			},
			page: {
				current: 1,
				size: 10,
				total: 0,
			},
		}
	},
	components: {
		pagination: FortressPagination,
	},
	mounted() {},
	methods: {
		copy() {
			this.$message({
				type: "success",
				message: "复制成功!",
			})
		},
		HandlerChoose() {
			this.dialogVisible = true
			this.queryList()
		},
		//查询表格数据
		queryList(page) {
			if (page) {
				this.page.current = page.current ? page.current : this.page.current
				this.page.size = page.size ? page.size : this.page.size
			}
			this.queryForm.current = this.page.current
			this.queryForm.size = this.page.size
			this.queryForm.resourceType = this.type
			sysossrecordPage(this.queryForm).then(resp => {
				if (resp.code == 0) {
					this.tableData = resp.data.records
					this.page.total = resp.data.total
					//查询页大于总页数，重新查询
					let cu =
						this.page.total % this.page.size == 0
							? parseInt(this.page.total / this.page.size)
							: parseInt(this.page.total / this.page.size + 1)
					if (cu > 0 && this.page.current > cu) {
						this.queryList({ current: cu })
					}
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
		//路径格式化返回
		urlFmt(row) {
			let name = row.resourceUrl
			if (row.ossPlatform == 1) {
				name = this.$store.state.prefixUrl + row.resourceUrl
			}
			return name
		},
		//选择图片
		choosed(row) {
			this.$emit("choosed", row, this.modelName, this.multiple)
			this.dialogVisible = false
		},
	},
}
</script>
<style scoped>
.res_choose {
	display: inline;
}
</style>
